<template>
  <div class="image-debug-container">
    <h3>图片调试工具</h3>
    <div class="debug-controls">
      <el-input 
        v-model="imagePath" 
        placeholder="输入图片路径" 
        clearable
        style="width: 70%; margin-right: 10px;"
      />
      <el-button type="primary" @click="testImage">测试</el-button>
      <el-button @click="clear">清除</el-button>
    </div>
    
    <div class="upload-section">
      <el-upload
        action="#"
        :http-request="handleUpload"
        :show-file-list="false"
        :before-upload="beforeUpload"
        class="upload-demo"
        drag
        accept="image/*"
      >
        <div class="upload-content">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">拖拽文件到此处或<em>点击上传</em></div>
          <div class="el-upload__tip">支持jpg、png等常见图片格式</div>
        </div>
      </el-upload>
    </div>
    
    <div v-if="imageUrl" class="result-section">
      <h4>测试结果</h4>
      <div class="image-display">
        <div class="original">
          <h5>原始图片路径</h5>
          <div class="path-display">{{ imageUrl }}</div>
        </div>
        
        <div class="processed">
          <h5>PetImage组件 (推荐)</h5>
          <div class="image-wrapper">
            <PetImage :src="imageUrl" debug="true" style="width: 100%; height: 200px;" />
          </div>
        </div>
        
        <div class="standard">
          <h5>标准img标签</h5>
          <div class="image-wrapper">
            <img 
              :src="imageUrl" 
              alt="测试图片" 
              style="max-width: 100%; max-height: 200px;" 
              @error="imageError = true" 
              @load="imageError = false"
            />
            <div v-if="imageError" class="error-message">加载失败</div>
          </div>
        </div>
        
        <div class="transformed">
          <h5>预处理URL</h5>
          <div class="path-display">{{ processedUrl }}</div>
          <div class="image-wrapper">
            <img 
              :src="processedUrl" 
              alt="预处理图片" 
              style="max-width: 100%; max-height: 200px;" 
              @error="processedError = true" 
              @load="processedError = false"
            />
            <div v-if="processedError" class="error-message">加载失败</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import PetImage from './PetImage.vue';
import { getImageUrl, readLocalImage } from '@/utils/image';

export default {
  name: 'PetImageDebug',
  components: {
    PetImage
  },
  setup() {
    const imagePath = ref('');
    const imageUrl = ref('');
    const processedUrl = ref('');
    const imageError = ref(false);
    const processedError = ref(false);
    
    const testImage = () => {
      if (!imagePath.value) return;
      
      imageUrl.value = imagePath.value;
      processedUrl.value = getImageUrl(imagePath.value);
    };
    
    const clear = () => {
      imagePath.value = '';
      imageUrl.value = '';
      processedUrl.value = '';
      imageError.value = false;
      processedError.value = false;
    };
    
    const beforeUpload = (file) => {
      const isImage = file.type.startsWith('image/');
      const isLt5M = file.size / 1024 / 1024 < 5;
      
      if (!isImage) {
        alert('只能上传图片文件!');
        return false;
      }
      
      if (!isLt5M) {
        alert('图片大小不能超过5MB!');
        return false;
      }
      
      return true;
    };
    
    const handleUpload = async (options) => {
      try {
        const file = options.file;
        // 将文件路径添加到输入框
        imagePath.value = file.path || '(本地文件)';
        // 读取文件内容为data URL
        const dataUrl = await readLocalImage(file);
        // 设置为当前测试图片
        imageUrl.value = dataUrl;
        processedUrl.value = dataUrl;
      } catch (error) {
        console.error('上传失败:', error);
        alert('上传失败: ' + error.message);
      }
    };
    
    return {
      imagePath,
      imageUrl,
      processedUrl,
      imageError,
      processedError,
      testImage,
      clear,
      beforeUpload,
      handleUpload
    };
  }
}
</script>

<style lang="scss" scoped>
.image-debug-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  
  h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
  }
  
  .debug-controls {
    display: flex;
    margin-bottom: 20px;
  }
  
  .upload-section {
    margin-bottom: 20px;
    
    .upload-content {
      padding: 20px;
    }
  }
  
  .result-section {
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
    
    h4 {
      margin-top: 0;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
    }
    
    .image-display {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      
      .original, .processed, .standard, .transformed {
        margin-bottom: 20px;
      }
      
      h5 {
        margin-top: 0;
        margin-bottom: 10px;
        color: #666;
      }
      
      .path-display {
        background-color: #f5f5f5;
        padding: 8px;
        border-radius: 4px;
        font-family: monospace;
        word-break: break-all;
        font-size: 12px;
        margin-bottom: 10px;
      }
      
      .image-wrapper {
        position: relative;
        min-height: 100px;
        border: 1px dashed #ddd;
        padding: 5px;
        
        .error-message {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #f56c6c;
          background-color: rgba(255, 255, 255, 0.8);
          padding: 5px 10px;
          border-radius: 4px;
        }
      }
    }
  }
}
</style> 